<template>
	<div class="hml">
		<div id="sign" style="height: 345px;">
			<h3>用户登录</h3>
				<div id="inp">
					<!-- 普通登录 -->
					<div><input type="text" placeholder="用户名" v-model="loginParam.adminUsername" class="txt1" v-if="login1 == true"></div>
					<div><input type="text" placeholder="密码" v-model="loginParam.adminPassword" class="txt2" v-if="login1 == true"></div>
					<!-- 邮箱登录 -->
					<div><input type="text" placeholder="邮箱" v-model="phoneLoginVo.phoneTel" class="txt1" v-if="login2 == true"></div>
					<div style="display: inline-block;"><input type="text" placeholder="验证码" v-model="phoneLoginVo.code" class="txt2" v-if="login2 == true" style="width: 150px;margin-left: 17px;"></div>
					<el-button style="border-radius: 10px;display: inline-block;margin-left: 100px;" v-if="login2 == true" @click="sendCode">发送</el-button>
					<!-- 注册 -->
					<div><input type="text" placeholder="账号注册" v-model="registerVo.account" class="txt1" v-if="register == true"/></div>
					<div><input type="text" placeholder="密码" v-model="registerVo.password" class="txt2" v-if="register == true"/></div>
				</div>
				<div id="font">
					<input type="checkbox" name="NAME" value="" class="ckx">下次自动登录
					<span class="span"> <a href="#">登录遇到问题</a> </span>
				</div>
				<div id="btn">
					<!-- <router-link to="/home"> -->
						<el-button class="btn1"  @click="loginA" v-if="login1 == true">登录</el-button>
						<el-button class="btn1"  @click="loginB" v-if="login2 == true">邮箱登录</el-button>
						<el-button class="btn1"  @click="registerOne" v-if="register == true">立即注册</el-button>
					<!-- </router-link> -->
				</div>
				<div id="reg">
					<a href="#" @click="registerThree">立即注册</a>
					<a href="#" @click="loginOne">普通登录</a>
					<a href="#" @click="loginTwo">邮箱登录</a>
					<!-- <router-link to="/shop">购票系统</router-link> -->
				</div>
				<!-- <div>
					<a href="#" @click="qqLogin"><img src="../../public/public/qq_logo.png" style="width: 20%; margin-top: 55px;margin-left: 20px;"></a>
				</div> -->
		</div>
	</div>
</template>

<script>
	export default{
		name:'Login',
		data(){
			return{
				register:false,
				registerVo:{
					account:null,
					password:null
				},
				loginParam:{
					adminUsername:null,
					adminPassword:null
				},
				phoneLoginVo:{
					phoneTel:null,
					code:null
				},
				login1:true,
				login2:false
			}
		},
		methods:{
			// register
			registerOne(){
				this.$http.post("/user/register",this.registerVo).then(resp=>{
					if(resp.data.code == 2000){
						this.$message.success(resp.data.message);
						this.login1();
					}else{
						this.$message.error(resp.datda.message)
					}
				})
			},
			qqLogin(){
				let left = screen.width/2-225;
				let top = screen.height/2-160;
				let url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101780702&redirect_uri=http://www.pawntest.com/qqlogin&state=test";
				
				var A = window.open(url,"TencentLogin",
				   "left="+left+",top="+top+",width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
				   
				   window.addEventListener("message",e => {
					   if(e.data != undefined && e.data != null && e.data !=''){
						   let rel = JSON.parse(e.data);
						   console.log(rel);
						   if(rel.code == 20000){
							   setTimeout(() =>{
								   localStorage.setItem("adminRoot",JSON.stringify(rel.data));
								   A.close();
								   this.$router.push("/main");
							   }, 1000);
						   }
					   }
				   })
		
			},
			sendCode(){
				this.$http.get("/user/sendCode/"+this.phoneLoginVo.phoneTel).then(resp=>{
					if(resp.data.code==20000){
						this.$message.success(resp.data.message)
					}else{
						this.$message.error(resp.data.message)
					}
				})
			},
			loginB(){
				const params = new URLSearchParams();
				params.append('phone',this.phoneLoginVo.phoneTel);
				params.append('code',this.phoneLoginVo.code);
				this.$http.post("/phoneLogin",params).then(resp=>{
					if(resp.data.code==20000){
						localStorage.setItem("adminRoot",JSON.stringify(resp.data.data))
						this.$router.push("/");
					}else{
						this.$message.error(resp.data.message)
					}
				})
			},
			loginA(){
				const params = new URLSearchParams();
				params.append('username',this.loginParam.adminUsername);
				params.append('password',this.loginParam.adminPassword);
				this.$http.post("/login",params).then(resp=>{
					console.log(resp);
					if(resp.data.code==20000){
						localStorage.setItem("adminRoot",JSON.stringify(resp.data.data))
						this.$router.push("/");
					}else{
						this.$message.error(resp.data.message);
					}
				})
			},
			loginOne(){
				this.login1=true;
				this.login2=false;
				this.register=false;
			},
			loginTwo(){
				this.login1=false;
				this.login2=true;
				this.register=false;
			},
			registerThree(){
				this.register=true;
				this.login1=false;
				this.login2=false;
			}
		},
	}
</script>

<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.hml{
			height: 1000px;
			position: absolute;
			width: 100%;
			background: url(../../public/public/timg.jpg);
		}
		#sign{
			width: 400px;
			height: 300px;
			background-color:#729998;
			border-radius: 3%;
			border: 1px solid #ccc;
			margin: 200px auto;
		}
		#sign h3{
			background: #457077;
			line-height: 50px;
			color:#fff;
			text-align: center;
			font-weight: bold;
			
		}
		#inp .txt1,.txt2{
			display: block;
			height: 35px;
			width: 360px;
			margin: 0 auto;
			font-size: 18px;
		}
		#inp .txt2{
			margin-top: 10px;
		}
		#btn .btn1{
			display: block;
			margin: 0 auto;
			border: none;
			width: 364px;
			height: 48px;
			margin-top: 10px;
			border-radius: 3%;
			font-size: 20px;
			color: #fff;
			background: #457077;
			font-weight: bold;
		}
		#font{
			font-size: 10px;
			margin-top: 5px;
			margin-left: 5px;
		}
		#font .ckx{
			/*display: block;*/
			width: 12px;
			height: 12px;
			margin-left: 13px;
		}
		#font .span{
			float: right;
			margin-right: 18px;
			margin-top: 2px;
		}
		#font .span a{
			text-decoration: none;
		}
		#reg a{
			text-decoration: none;
			font-size: 10px;
			float: right;
			margin-right: 18px;
			margin-top:10px;
		}
	</style>
